<template>
    <div class='card upload' v-show="true">
        <input type="file" @change="fileChange" multiple />
        <el-button @click="upload" class="g-button">文件上传</el-button>
        <el-button @click="downLoad" class="g-button">文件下载</el-button>
    </div>
    <el-row class='card upload'>
        <el-col :span="12">
            <h2 style="margin-bottom: 10px;">多图片上传</h2>
            <el-upload v-model:file-list="fileList" list-type="picture-card" class="upload-demo" :auto-upload="true"
                :headers="uploadHeaders" :multiple="true" :action="url" :before-upload="beforeUpload"
                :on-remove="handleRemove">
                <div>
                    <el-icon size="22">
                        <Plus />
                    </el-icon>
                    <div>请上传图片</div>
                </div>
                <template #file="{ file }">
                    <div class="image">
                        <img :src="file.url" alt="">
                    </div>
                    <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <el-icon><zoom-in /></el-icon>
                        </span>
                        <span class="el-upload-list__item-delete" @click="handleDownload(file)">
                            <el-icon>
                                <Download />
                            </el-icon>
                        </span>
                        <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                            <el-icon>
                                <Delete />
                            </el-icon>
                        </span>
                    </span>
                </template>
            </el-upload>
        </el-col>
        <el-col :span="12">
            <el-button class="g-button" style="margin-bottom: 10px;" @click="queryFileList">查看已上传文件列表</el-button>
            <div>
                <my-table ref="queryTable" height="300px" :tableHeader="tableHeader" :selection="true" url="/queryFileList">
                    <template #action="{ data }">
                        <div class="icon-dowmload">
                            <el-icon size="22" :class="data.row['isDownLoad'] ? 'table-download' : 'table-nodownload'"
                                @click="tableDownload(data)">
                                <Download />
                            </el-icon>
                        </div>
                    </template>
                    <template #testSlot1-1="{ data }">
                        <div>
                            <g-formItem type="switch" label="是否下载" :value="data.row['isDownLoad']"
                                @valueChange="(v) => (data.row['isDownLoad'] = v)"></g-formItem>
                        </div>
                    </template>
                    <template #testSlot2>
                        <div>
                            这是插槽2
                        </div>
                    </template>
                    <template #header_testSlot1-2>
                        <el-button class="g-button">
                            自定义插槽表头1-2
                        </el-button>
                    </template>
                    <template #header_fileDate>
                        <div>
                            自定义插槽表头
                        </div>
                    </template>
                </my-table>
            </div>
        </el-col>
    </el-row>
    <div class='card upload'>

    </div>
</template>
    
<script setup>
import { ref, watchEffect } from 'vue'
import request from '@/api/request.js'
import { ElMessage } from "element-plus";
/**
 * 原生input上传下载
 * 
 */
let fileData = {}
const fileChange = e => {
    fileData = e.target.files[0]
}
let fileId
const upload = () => {
    const formData = new FormData()
    formData.append('file', fileData)
    request.post('/upload', formData, {}, { 'Content-type': "multipart/form-data" }).then(res => {
        if (res.code != 200) {
            ElMessage({
                message: "上传失败",
                type: "error",
            });
            return
        }
        ElMessage({
            message: "上传成功",
            type: "success",
        });
        fileId = res.data.fileId
    })
}
const downLoad = () => {
    //window.open(`${process.env.VUE_APP_API_URL}/download/${fileName.value}`); // get请求
    request.download('/downLoad', { fileId },).then(res => {
        const { fileType } = res
        const blob = new Blob([res.data]);
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.style.display = 'none'
        a.href = url
        a.download = '文件' + fileType
        a.click()
        window.URL.revokeObjectURL(url)
    })
}
/**
 * el-upload上传下载
 * 
 */
const fileList = ref([])
const url = process.env.VUE_APP_FILE_URL
const uploadHeaders = {
    'g-token': sessionStorage.getItem('token'),
    'g-session': sessionStorage.getItem('session')
}
const judgeFileType = (fileName, typeList) => {
    const fileType = fileName.split('.')[1]
    return typeList.includes(fileType)
}
const beforeUpload = (file) => {
    const typeList = ['jpg', 'png']
    const bool = judgeFileType(file.name, typeList)
    if (!bool) {
        ElMessage({
            message: "请选择jpg或者png类型的文件",
            type: "warning",
        });
        return false
    }
}
const handlePictureCardPreview = (file) => {

}
const handleDownload = (file) => {

}
const handleRemove = (file) => {

}
const tableHeader = [
    {
        prop: "originalname",
        label: "文件名",
        width: 200
    },
    {
        prop: "testSlot1",
        label: "插槽1",
        children: [
            { prop: "testSlot1-1", label: "插槽1-1", isSlot: true, width: 200 },
            { prop: "testSlot1-2", label: "插槽1-2", headerSlot: true, width: 200 },
        ]
    },
    {
        prop: "testSlot2",
        label: "插槽2",
        isSlot: true,
        width: 150
    },
    {
        prop: "fileDate",
        label: "上传日期",
        width: 200,
        headerSlot: true,
    },
    {
        prop: "action",
        label: "操作",
        width: 150,
        fixed: 'right',
        isSlot: true,
    },
];
const queryTable = ref()
const queryFileList = () => {
    queryTable.value.query()
}
const tableDownload = data => {
    if (!data.row.isDownLoad) return
    request.download('/downLoad', { fileId: data.row.fileId }).then(res => {
        if (res.code != 200) {
            ElMessage({
                message: res.msg,
                type: "error",
            });
            return
        }
        const { fileType } = res
        const blob = new Blob([res.data]);
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.style.display = 'none'
        a.href = url
        a.download = '图片' + fileType
        a.click()
        window.URL.revokeObjectURL(url)
    })
}
</script>
    
<style scoped>
.upload {
    margin-bottom: 20px;
    height: 70%;
}

.uploadButton {
    width: 150px;
    height: 150px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px dashed gray;
}

.image {
    display: flex;
    align-items: center;
}

.image:hover {
    background-color: rgba(0, 0, 0, .5);
}

.image img {
    width: 150px;
    height: 80px;
    border-radius: 10px;
}

.upload /deep/ .el-upload.el-upload--picture-card:hover {
    border-color: var(--isActive-color);
    color: var(--isActive-color);
}

.upload /deep/ .el-upload.el-upload--picture-card {
    border-color: gray;
    color: gray;
}

.icon-dowmload {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.table-download {
    cursor: pointer;
}

.table-download:hover {
    color: var(--isActive-color);
}

.table-nodownload {
    cursor: no-drop;
}
</style>